﻿@using DevExpress.ExpressApp
@using DevExpress.ExpressApp.Blazor
@using DevExpress.ExpressApp.Blazor.Components
@using DevExpress.ExpressApp.Blazor.Templates
@using Microsoft.JSInterop

@inherits FrameTemplateComponentBase<ApplicationWindowTemplate1>

<div id="main-window-template-component" class="app h-100 d-flex flex-column">
    <ComponentModelObserver ComponentModel="@FrameTemplate.NavigateBackActionControl.ButtonModel">
        <div class="header d-flex flex-row shadow-sm navbar-dark flex-nowrap @DetailViewHeaderClass @NavigateBackActionHeaderClass">
            <div class="header-left-side d-flex align-items-center ps-2">
                <button class="btn-hamburger p-0 btn btn-secondary btn-header">
                    <XafImage ImageName="Hamburger" Size="24" Styles="margin: auto;" />
                </button>
                <div class="header-logo mx-3"></div>
            </div>
            <div class="header-right-side w-100 overflow-hidden d-flex align-items-center ps-4">
                @FrameTemplate.NavigateBackActionControl.GetComponentContent()
                <ViewCaptionComponent WindowCaption="@FrameTemplate" />
                <SizeModeContainer>
                    @FrameTemplate.HeaderToolbar.GetComponentContent()
                </SizeModeContainer>
                <div class="d-flex ms-auto">
                    @FrameTemplate.AccountComponent.GetComponentContent()
                    <SettingsComponent />
                </div>
            </div>
        </div>
    </ComponentModelObserver>
    <div class="xaf-flex-auto overflow-hidden d-flex">
        <div class="xaf-sidebar sidebar d-none d-sm-flex flex-column">
            @FrameTemplate.ShowNavigationItemActionControl.GetComponentContent()
            <div class="about-info mx-3 mb-4">
                @((MarkupString)FrameTemplate.AboutInfoString)
            </div>
        </div>
        <div class="sidebar-sm-shadow"></div>
        <div class="main xaf-flex-auto overflow-hidden d-flex flex-column">
            <SizeModeContainer>
                @if(FrameTemplate.IsActionsToolbarVisible && @FrameTemplate.Toolbar.ContainsVisibleActionControl()) {
                    <div class="main-toolbar py-3 px-2 px-sm-3">@FrameTemplate.Toolbar.GetComponentContent()</div>
                }
                <div class="main-content xaf-flex-auto overflow-auto pb-3 px-2 px-sm-3">
                    <ViewSiteComponent View="@FrameTemplate.View" />
                </div>
            </SizeModeContainer>
        </div>
    </div>
</div>

@code {
    public static RenderFragment Create(ApplicationWindowTemplate1 applicationWindowTemplate) => @<ApplicationWindowTemplate1Component FrameTemplate="@applicationWindowTemplate" />;
    private string DetailViewHeaderClass => FrameTemplate.View is DetailView ? "xaf-detail-view-header" : default;
    private string NavigateBackActionHeaderClass => FrameTemplate.NavigateBackActionControl.Visible ? "xaf-show-navigate-back-action" : default;
    protected override async Task InvokeAfterViewChangedJS() {
        await JSRuntime.InvokeVoidAsync("xaf.closeSideBarIfMobile");
        await base.InvokeAfterViewChangedJS();
    }
    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if (firstRender) {
            await JSRuntime.InvokeVoidAsync("xaf.initApplicationWindowTemplate");
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}
